.example-card {
  width: 140px;
  margin: 6px 4px;
  position: relative;
}
.skeleton-img{
  height: 250px; /* change height to see repeat-y behavior */
  
  background-image:linear-gradient( lightgray 250px, transparent 0 );

  background-repeat: no-repeat;
}


.skeleton{ 
  margin: auto;
  width: 75%;
  height: 22px; /* change height to see repeat-y behavior */
  
  background-image:
    linear-gradient( 100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 80% ),
    linear-gradient( lightgray 19px, transparent 0 );

  background-repeat: repeat-y;

  background-size:
    50px 200px, /* highlight */
    100% 100%;

  background-position:
    0 0, /* highlight */
    0 0;

  animation: shine 1s infinite;
}

@keyframes shine {
  to {
    background-position:
      100% 0, /* move highlight to right */
      0px 0;
  }
}